<!doctype html>
<html>
    <head>
        <link rel="import" href="global_include/head.html?__inline">
        <link rel="stylesheet" type="text/css" href="css/swiper.css" />
        <link rel="stylesheet"  type="text/css" href="css/common.less" />
        <!--usemin css(pkg/index.css)-->
        <link rel="stylesheet" type="text/css" href="css/index.less" />
        <!--end-->
        <!--描述：加载设计样式-->
    </head>
    <body>
        <h1>阴阳寮入境预检</h1>
        <!--分享设置-->
        <link rel="import" href="global_include/share_setting.html?__inline">

        <div id="forhorview">
            <p>推荐使用竖屏浏览哦~</p>
        </div>
        <!--音乐层-->
        <div class="audio-wrap">
            <audio src="data/music/bg.mp3" type="audio/mp3" loop="loop"  id="au1" preload="load"></audio>
            <audio id="au2" src="data/music/chuo.mp3" type="audio/mp3"></audio>
            <audio id="au3" src="data/music/show_zr.mp3" type="audio/mp3"></audio>
            <audio id="au4" src="data/music/click_zr.mp3" type="audio/mp3"></audio>
            <audio id="au5" src="data/music/summer.mp3" type="audio/mp3"></audio>
        </div>

        <!--loading页面-->
        <div class="load-wrap ani">
            <div class="load-btn"></div>
            <div class="tree"></div>
            <div class="load-zhen"></div>
            <div class="qiaogu"></div>
            <!-- <div class="load-zr"></div> -->
            <!-- <div class="load-gu"></div> -->
            <!-- <div class="load-gunl"></div> -->
            <!-- <div class="load-gunr"></div> -->
            <div class="load-line1"></div>
            <div class="load-line2"></div>
            <div class="load-line3"></div>
            <div class="load-line4"></div>
            <div class="jd-wrap"><div class="jd-line"></div></div>
            <div class="text-wrap"><div class="text-line"></div></div>
        </div>

        <div id="main" class="start-ani">
            <!--主体-->
            <div class="main-swiper-wrap">
                <div class="swiper-container main-swiper">
                    <div class="swiper-wrapper">

                        <!--登录页-->
                        <div class="swiper-slide p1 ani">
                            <div class="p1-yanqi"></div>
                            <div class="p1-chuo"><i>3-31</i></div>
                            <div class="p1-lightl"></div>
                            <div class="p1-lightr"></div>
                            <div class="p1-zr"></div>
                            <div class="yy-ent">
                            	<p>已预约<i></i>人</p>
                            </div>

                            <div class="p1-go"></div>
                            <div class="p1-gz"></div>
                        </div>

                        <!--召唤页-->
                        <div class="swiper-slide p2 wi">
                            <div class="pre-def"></div>
                            <div class="p2-lightl"></div>
                            <div class="p2-lightr"></div>
                            <div class="exp-text"></div>
                            <div class="p2-zhz-3"></div>
                            <div class="p2-zhz-2">
                                <canvas id="p2-zhz-2" width="" height=""></canvas>
                            </div>
                            <div class="p2-bz">
                                <canvas id="p2-bz" width="" height=""></canvas>
                            </div>
                            <div class="p2-zhz">
                                <div class="zr-target"></div>
                            </div>
                            <div class="p2-zr-start">
                                <div class="driver "></div>
                                <div class="p2-zr"></div>
                                <div class="p2-arrow"></div>
                                <div class="p2-hand"></div>
                            </div>
                            <div class="p2-zhz-zr"></div>
                            <div class="p2-zr-on" id="p2-zr-on"><div class="bg"></div></div>
                            <div class="call-btn"></div>
                        </div>

                        <!--显示式神结果页 包含两个状态 分两个wrap表示-->
                        <div class="swiper-slide p3">
                            <div class="ss-now ani">
                                <div class="p3-bg">
                                    <div class="cloudr"></div>
                                    <div class="cloudl"></div>
                                    <div class="sun1"></div>
                                    <div class="sun2"></div>
                                    <div class="sun3"></div>
                                    <div class="sun4"></div>
                                </div>
                                <div class="role">
                                    <!-- <img src="img/ss/202.png" alt="式神"> -->
                                </div>
                                <!-- <div class="sr-icon"></div>
                                <div class="role-name"></div>
                                <div class="sm-level"></div>
                                <div class="role-tit"></div> -->
                                <div class="p3-btn-wrap">
                                    <div class="confirm-yes">
                                        <p>(当前保存式神：<i></i>)</p>
                                    </div>
                                    <div class="sm-changebtn">
                                        <p>(今天还剩<i></i>次抽取机会)</p>
                                    </div>
                                    <div class="show-result">查看当前携带式神</div>
                                </div>
                            </div>
                            <div class="ss-already ani">
                                <div class="p3-bg">
                                    <div class="cloudr"></div>
                                    <div class="cloudl"></div>
                                    <div class="sun1"></div>
                                    <div class="sun2"></div>
                                    <div class="sun3"></div>
                                    <div class="sun4"></div>
                                    <div class="sun5"></div>
                                </div>
                                <div class="player-info">
                                    <div class="tit">阴阳寮入境资料确认：</div>
                                    <div class="tit2">恭喜阴阳师大人预检成功，请使用手机号登录预约区服领取奖励。以下是您的入境资料:</div>
                                    <p><sapn>账号：</sapn><i id="yyzh"></i></p>
                                    <p><sapn>区服：</sapn><i id="yyqf"></i></p>
                                    <p><sapn>时间：</sapn><i id="rjsj">3月31日11:00</i></p>
                                    <p><sapn>携带：</sapn><i id="xd"></i></p>
                                    <div class="sm-changebtn">
                                        <p>(今可召唤<i>0</i>次)</p>
                                    </div>
                                </div>
                                <div class="role">
                                    <!-- <img src="img/ss/202.png" alt="式神"> -->
                                </div>
                                <!-- <div class="sr-icon"></div>
                                <div class="role-name"></div>
                                <div class="sm-level"></div>
                                <div class="role-tit"></div> -->
                                <div class="p3-btn-wrap">
                                    <div class="confirm-yes">
                                    </div>
                                    <div class="p3-confirm-final"><a href="https://adl.netease.com/d/g/yys/c/fabmb"></a></div>
                                    <div class="share-btn"></div>
                                    <!-- <div class="sm-changebtn">
                                        <p>(还剩<i>2</i>次抽取机会)</p>
                                    </div> -->
                                </div>
                            </div>
                        </div>

                        <!--落地页-->
                        <div class="swiper-slide p4 ani">
                            <div class="p4-bg">
                                <div class="cloudr"></div>
                                <div class="cloudl"></div>
                                <div class="sun1"></div>
                                <div class="sun2"></div>
                                <div class="sun3"></div>
                                <div class="sun4"></div>
                                <div class="sun5"></div>
                            </div>
                            <div class="door"></div>
                            <div class="p4-yanqi"></div>
                            <div class="p4-chuo"></div>
                            <div class="logo"></div>
                            <div class="p4-light"></div>
                            <div class="role1"></div>
                            <div class="role2"></div>
                            <div class="p4-btn-wrap">
                                <div class="confirm-final"><a href="https://adl.netease.com/d/g/yys/c/gwm"></a></div>
                                <div class="share-btn"></div>
                            </div>
                            <div class="last-info">
                                <div class="l-close"></div>
                                <div class="l-tit">恭喜阴阳师大人预检成功 !<br>请使用手机号登录预约区服领取奖励<br>以下是您的入境资料</div>
                                <p><sapn>预约账号：</sapn><i id="lyyzh"></i></p>
                                <p><sapn>预约区服：</sapn><i id="lyyqf"></i></p>
                                <p><sapn>入境时间：</sapn><i id="lrjsj">2017年3月31日11:00</i></p>
                                <p><sapn>携带：</sapn><i id="lxd"></i></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>            

            <!--通用底部模块-->
            <!-- <link rel="import" href="global_include/site_bottom.html?__inline"> -->

        </div>
        
        <!--音乐按钮-->
        <div class="musicbtn active"></div>

        <!--首页规则说明弹层1-->
        <div class="pop" id="guize">
            <div class="pop-con gz">
                <div class="pop-close"></div>
                <div class="con">
                    <p>1.式神抽取时间：<br>3月24日游戏更新后-3月30日24:00</p>
                    <p>2.活动简介：<br>使用手机号完成预约后，进入小游戏，拖动小纸人到召唤阵中，可以随机召唤出一位式神，该式神将在游戏开服后以系统邮件方式发送至新服角色下；</p>
                    <p>3.召唤规则：<br>使用手机号预约；每个手机号每天有3次召唤机会，每天完成分享则当天的召唤次数+1；抽卡次数当天24:00清空，不累计到下一天；新召唤的式神选择替换操作时，会自动覆盖上一次保存的式神；所有召唤的式神均为2星；</p>
                    <p>4.领取规则：<br>新服开服后，使用预约手机号登录预约服务器(<span class="dlzy">查看登录指引</span>)，选择的式神将会以系统邮件方式发送至新角色中；式神领取的时间为3月31日11:00-4月15日；</p>
                    <p>5.本次活动最终解释权归《阴阳师》，若恶意作弊刷号将会被取消本活动获得的奖励。</p>
                </div>
            </div>
        </div>
        
        <!--首页规则说明弹层2-->
        <div class="pop" id="wxts">
            <div class="pop-con wxts">
                <div class="pop-close"></div>
                <div class="con">
                    <p class="title"><i>1</i>选择登录方式：网易手机账号</p>
                    <img src="img/warn/w1.png" alt="温馨提示">
                    <div class="arrow-line"><i></i></div>
                    <p class="title"><i>2</i>输入预检预留手机号</p>
                    <img src="img/warn/w2.png" alt="温馨提示">
                    <div class="arrow-line"><i></i></div>
                    <p class="title"><i>3</i>登录</p>
                    <img src="img/warn/w3.png" alt="温馨提示">
                    <div class="arrow-line"><i></i></div>
                    <p class="title"><i>4</i>登录成功后点击进入选择寮宅界面</p>
                    <img src="img/warn/w4.png" alt="温馨提示">
                    <div class="arrow-line"><i></i></div>
                    <p class="title"><i>5</i>选择已预约的寮宅</p>
                    <img src="img/warn/w5.png" alt="温馨提示">
                    <div class="arrow-line"><i></i></div>
                    <div class="last-text">
                        <em></em>选择成功后点击进入游戏按钮即可进入平安世界了。预检奖励的式神将会伴随您一起斗技捉妖，体验平安世界的风采！赶紧来体验吧~
                    </div>
                </div>
            </div>
        </div>
        
        <!--登录手机号弹层-->
        <div class="pop" id="login-wrap">
            <div class="pop-con login">
                <div class="pop-close"></div>
                <div class="con">
                    <div class="log-tit"></div>
                    <!-- <div id="Jlogin"></div> -->
                    <div class="input-wrap">
                        <input id="phone-num" type="text" class="phone-num" placeholder="请输入手机号" maxlength="11">

                        <div class="img-code-wrap">
                            <input id="img-code" class="img-code" placeholder="请输入验证码" type="text" maxlength="3">
                            <div id="imgcode-btn" class="imgcode-btn">
                                <img src="//g37-capsule-toys.webapp.163.com/get_img_auth" alt="获取图片验证码">
                            </div>
                        </div>
                        
                        <div class="phone-code-wrap">
                            <input id="phone-code" class="phone-code" placeholder="请输入手机验证码" maxlength="4" type="text">
                            <div id="phonecode-btn" class="phonecode-btn">
                                <div class="ds-warn"></div>
                            </div>
                        </div>
                        <div id="err-text" class="err-text"></div>
                        <div id="reg-btn" class="reg-btn"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!--选择服务器弹层-->
        <div class="pop" id="server-wrap">
            <div class="pop-con ser-log">
                <div class="pop-close"></div>
                <div class="con">
                    <div class="ser-tit"></div>
                    <div class="select-ser">
                        <div class="ser-item s1" set-val="10013">
                            <p>中国区iOS<br>桂之馥</p>
                        </div>
                        <div class="ser-item s2" set-val="15027">
                            <p>网易双平台<br>风雨同行</p>
                        </div>
                        <div class="ser-item s3 cur" set-val="15032">
                            <p>网易双平台<br>谜之暗影</p>
                        </div>
                    </div>
                    <div class="ser-ok"></div>
                </div>
            </div>
        </div>
        
        <!--确认是否替换-->
        <div class="pop" id="istihuan-wrap">
            <div class="pop-con istihuan">
                <div class="pop-close"></div>
                <div class="con">
                    <div class="istihuan-yes"></div>
                    <div class="istihuan-no"></div>
                </div>
            </div>
        </div>

        <!--微信分享层-->
        <div class="pop" id="share-wrap">
            <div class="pop-con final-share">
                
            </div>
        </div>
        
        <!--预约人数弹层-->
        <div class="pop" id="yuyue-wrap">
            <div class="pop-con yuyue-log">
                <div class="pop-close"></div>
                <div class="con">
                	<div class="reward-wrap">
	                    <div class="jjt-wrap">
	                    	<i></i>
	                    </div>
	                    <div class="re-txt"></div>
	                    <div class="reicon-wrap">
	                    	<div class="reicon r1">
	                    		<i class="js-p"></i><em class="js-p"></em>
	                    		<div class="reicon-pop">
	                    			<div class="top-tit">祝福礼包</div>
	                    			<div class="sub-tit">预约人数达到100,000，可获得礼包：<br>
	                    			蓝色符咒*1，体力*100</div>
	                    		</div>
	                    	</div>
	                    	<div class="reicon r2">
	                    		<i class="js-p"></i><em class="js-p"></em>
	                    		<div class="reicon-pop">
	                    			<div class="top-tit">皮肤礼包</div>
	                    			<div class="sub-tit">预约人数达到300,000，可获得礼包：<br>皮肤券*100，金币*5000</div>
	                    		</div>
	                    	</div>
	                    	<div class="reicon r3">
	                    		<i class="js-p"></i><em class="js-p"></em>
	                    		<div class="reicon-pop">
	                    			<div class="top-tit">勾玉礼包</div>
	                    			<div class="sub-tit">预约人数达到500,000，可获得礼包：<br>勾玉*100，经验加成 （3天）</div>
	                    		</div>
	                    	</div>
	                    	<div class="reicon r4">
	                    		<i class="js-p"></i><em class="js-p"></em>
	                    		<div class="reicon-pop">
	                    			<div class="top-tit">神秘符咒</div>
	                    			<div class="sub-tit">预约人数达到800,000，可获得礼包：<br>
	                    			神秘的符咒*2（开服后连续5天，每天21：00新区发放）</div>
	                    		</div>
	                    	</div>
	                    	<div class="reicon r5">
	                    		<i class="js-p"></i><em class="js-p"></em>
	                    		<div class="reicon-pop">
	                    			<div class="top-tit">豪华达摩</div>
	                    			<div class="sub-tit">预约人数达到1,000,000，可获得礼包：<br>招福达摩*3，奉为达摩*2，御行达摩*1</div>
	                    		</div>
	                    	</div>
	                    </div>
                	</div>
                    <div class="yy-now"></div>
					<div class="yy-warn-txt">网易双平台新服【谜之暗影】将于3月31日11:00开启</div>
                    <a href="https://adl.netease.com/d/g/yys/c/gwm" class="down-ok"></a>
                </div>
            </div>
        </div>

        <div class="img-cache">
            
        </div>
        
        <!--遮罩层-->
        <div id="fade" class="fade"></div>
        <!--此乃底部-->
        <!--营销点代码-->
        
        <!-- zepto mix NIE (最新版本）-->
        <script charset="utf-8" type="text/javascript"  src="js/common/init_fs.js"></script>
        <script charset="utf-8" src="https://nie.res.netease.com/comm/js/nie/util/trueLoad.v2.1.js"></script>
        <script charset="utf-8" src="https://nie.res.netease.com/comm/js/zepto(mixNIE).last.js"></script>
        <!--lib中的文件，自动合并为一个文件-->
        <!--usemin js(pkg/common.js)-->
        <script charset="utf-8" type="text/javascript" src="js/lib/swiper.js"></script>
        <script charset="utf-8" type="text/javascript"  src="js/common/common.js"></script>
        <script charset="utf-8" type="text/javascript"  src="js/common/global.js"></script>
        <!--end-->

        <!--usemin js(pkg/index.js)-->
        <script charset="utf-8" type="text/javascript" src="js/app/index.js"></script>
        <!--end-->
    </body>
</html>